<!-- 物流线路 - 表单编辑页面 -->
<template>
  <div class="page_rela_container" >
		<div class="scroll_auto flex_cell">

    <el-form ref="formEl" :model="formValue" label-width="120px" class="common-form-panel-div">

      <ex_header_spiler :title="$tt('客户价卡基础信息')" style="margin-top: 10px;"></ex_header_spiler>

      <el-row style="margin-top: 20px;">
        <el-col>
          <!--产品名称  -->
          <el-form-item :label="$tt('label_pms_product_name')">
            <el-input v-model="formValue.productName" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <!-- 产品编码 -->
          <el-form-item :label="$tt('label_pms_product_code')">
            <el-input v-model="formValue.productCode" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col>
          <!-- 版本名称 -->
          <el-form-item :label="$tt('版本名称')">
            <el-input v-model="formValue.versionName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 物流标准费用配置 -->
      <ex_header_spiler :title="$tt('客户价卡配置')" style="margin-top: 10px;"></ex_header_spiler>
      <!-- ref="transportPriceEl" -->

      <div style="position: relative;">

        <el-button v-show="editable" @click="adTabConfig" style="position: absolute;  top: 0px; right: 20px; z-index: 999; " icon="el-icon-plus">添加配置</el-button>

        <ex-button-delete
          style="position: absolute;  top: 60px; left: 420px; z-index: 999; "
          v-if=" formValue.versions && formValue.versions.length>0 && activeName != getTabId(formValue.versions[0])"
          v-show="editable"
          message="确定删除当前产品价卡配置？"
          label="删除当前配置"
          byAction
          :delAction="()=>{
            formValue.versions = formValue.versions.filter(tab => getTabId(tab) != activeName);
            activeName = getTabId(formValue.versions[0]);
          }"
        ></ex-button-delete>

        <el-tabs v-model="activeName" type="card" >
          <el-tab-pane v-for="(item,index) in formValue.versions"
                       :label="getTabTitle(item)"
                       :name=" getTabId(item) "
                       :key="item.id">
            <transport-price-cfg
              ref="transportPriceCfg"
              :edit-type="editable"
              :priceVersionId="item.id"
              :versionStartTimeDisabled="index == 0"
              :inputValue="item"
              showCostPoint
              :productType="formValue.productType"
              @dateRangeChange="val => {
                item.versionStartTime = val[0];
                item.versionEndTime = val[1];
                item.labelTitle = getTabTitle(item) ;
              }"
            ></transport-price-cfg>
          </el-tab-pane>
        </el-tabs>

      </div>

    </el-form>


	</div>

<div class="page_rela_bottom_area"  v-show="editable">


      <el-button type="primary" @click="submitForm()" >{{ $tt('label_save') }}</el-button>
      <el-button @click="goback()">{{ $tt('label_cancel') }}</el-button>
    </div>

  </div>

</template>
<script>

  import TransportPriceCfg from '@/component/pms/transport_price_cfg.vue'

  import TransportAreaEdit from '@/component/pms/transport-area-edit.vue'

  import FmsCurrencyChoose from '@/component/fms/fms-currency-choose.vue'

  import PmsPricePoint from '@/component/pms/pms-price-point.vue'

  import PmsWarehouseSelect from '@/component/pms/pms-warehouse-select.vue'

  import PmsRouteFilterSelect from '@/component/pms/pms-route-filter-select.vue'

  export default {

    components: {TransportPriceCfg, TransportAreaEdit,  FmsCurrencyChoose, PmsPricePoint, PmsWarehouseSelect, PmsRouteFilterSelect},
    mixins: [],
    data() {

      return {

        "operateType": "",
        "activeName": "",
        "formValue": {
          "versionName": "",
          "versions": []
        },

        "isEditModel": false,

        editable: true

      };
    },

    created() {

      let _this = this

      let versionId = this.$route.query.vid;
      let productId = this.$route.query.pid;

      if (this.$route.query.editType) {
          if ('false' === this.$route.query.editType) {
              this.editable = false;
          }
      }

      if (versionId && productId) {

        _this.$ajax({
          url: '/fms-api/product/PmsTransportCustomerRpc/detail.json',
          data:{
            "versionId": versionId,
            "productId": productId
          },
          success: (res) => {

            _this.formValue = res.data

            if(_this.formValue.type == 'add'){
              this.$tag.tagModifyLabel('客户价卡新增')
            }
            else{
              if (this.editable) {
                  this.$tag.tagModifyLabel('客户价卡编辑')
              }
              else {
                  this.$tag.tagModifyLabel('客户价卡详情')
              }
            }

            _this.formValue.versions.forEach(r=>{
              r.labelTitle = _this.getTabTitle(r)
            })

            _this.formValue.versions.forEach(r=>{
              if(!r.id){
                r.id = 'id_' + (Math.random() + '').replace('.', '')
              }
            })

            _this.activeName = _this.getTabId( _this.formValue.versions[0] )

          }
        });
      }

    },

    mounted() {
    },

    watch: {
    },

    methods: {

      dateTimeRangeChange(val){
        // val => { item.versionStartTime=val[0]; item.versionEndTime=val[1]; }

        console.log(val)
      },

      adTabConfig(){

        let sample = JSON.parse(JSON.stringify(this.formValue.versions[this.formValue.versions.length -1] ))

        let lastTime = sample.versionEndTime

        sample.versionStartTime = lastTime
        sample.versionStartTime = parseInt(lastTime) + 86400000
        sample.versionEndTime = parseInt(lastTime)+ 31536000000

        sample.id = 'id_' + (Math.random() + '').replace('.', '')

        this.formValue.versions.push(sample)
        this.activeName = this.getTabId(this.formValue.versions[0])

      },

      getTabTitle(item){
        return this.$dateFormatDate(item.versionStartTime) + ' 至 '+ this.$dateFormatDate(item.versionEndTime)
      },

      getTabId(item){
        return 'tab_' + item.id
      },

      submitForm() {

        let _this = this
        let submitData = this.formValue  // {...this.formValue, ... _this.$refs['supplyServiceEl'].getFormData() }

        // 物流报价
        let versions = _this.$refs['transportPriceCfg'].map(e=>e.getFormData())

        this.formValue.versions = versions

        // console.log((this.formValue.versions))

        _this.$ajax({
          url: '/fms-api/product/PmsTransportCustomerRpc/saveUpdate.json',
          type: 'json',
          data: submitData,
          success: (responseData) => {

            this.$message({
              showClose: true,
              message:  this.$tt('tip_submit_success'),  //'提交成功',
              type: 'success'
            })
            this.$tag.tagClose()

          },
          afterAjax() {
          }
        });

      },

      goback() {
        this.$tag.tagClose()
      }
    }
  };

</script>
<style>
  .product-line-limit-div, .product-line-limit-div-2 {
    display: flex;
  }


  .product-line-limit-div .product-line-limit-col {
    width: 220px;
    text-align: center;
    margin-right: 10px;
  }

  .product-line-limit-div-2 div {
    width: 300px;
    /*text-align: center;*/
    margin-right: 10px;
  }

  .price-cal-div-row {
    display: flex;
  }

  .price-cal-div-row .price-cal-col {
    width: 120px;
    text-align: center;
  }

  .price-cal-div-row div {
    margin-right: 8px;
    text-align: center;
  }


</style>
